<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in swipeList" :key="item">
      <img :src="item" alt="" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { SwipeList } from "../../service/banner.js";
export default {
  data() {
    return {
      swipeList: [
        "https://img0.baidu.com/it/u=381161214,1486388673&fm=253&fmt=auto&app=138&f=JPEG?w=672&h=500",
        "https://img1.baidu.com/it/u=3613753213,2794427106&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img1.baidu.com/it/u=3262734344,2033493696&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=730",
        "https://img1.baidu.com/it/u=638124575,2671736049&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
        "https://img0.baidu.com/it/u=2382053661,2987549222&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
      ],
      list: [],
    };
  },
  created() {
    this.swipeData();
  },
  methods: {
    swipeData() {
      SwipeList().then((res) => {
        if (res.code === "200") {
          this.list = res.data.data;
          console.log(this.list);
        }
      });
    },
  },
};
</script>
<style scoped>
img {
  width: 100%;
  height: 100%;
  display: block;
}
.my-swipe {
  width: 100%;
  height: 200px;
  margin-bottom: 10px;
  overflow: hidden;
}
.van-swipe-item{
  /* width: 100%;
  overflow: hidden; */
}
.my-swipe img{
  border-radius: 10px;
}

</style>
